<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" />
    <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
    <link rel="stylesheet" href="static/css/supply-demand-detail.css" />
    <link rel="stylesheet" href="static/css/commonality.css" />
    <link rel="stylesheet" href="lib/layui/css/layui.css" />
    <script src="./static/js/main.js"></script>
    <script src="./static/js/echarts.min.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/vue-resource.min.js"></script>
    <script src="./static/laydate/laydate.js"></script>
    <title>产品销量分析</title>
</head>

<body>
    <div class="detail" id="supplyAndDemand">
        <div class="nav">
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="./news-list.html">新闻</a>
                    </li>
                    <li>
                        <a href="./goods-list.html">商品信息</a>
                    </li>
                    <li>
                        <a href="company-list.html">企业信息</a>
                    </li>
                    <li>
                        <a href="./output-value-detail.html">产值分析</a>
                    </li>
                    <li>
                        <a href="./map-detail.html">市场分布</a>
                    </li>
                    <li>
                        <a href="./product-list.html">产销分析</a>
                    </li>
                    <li class="selectBar">
                        <a href="./supply-demand-detail.html">供需分析</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="main-mian">
                <!-- <div class="main-supplySearch">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="padding-left:0px;padding-right:0px;width:75px;">统计年份：</label>
                        <div class="layui-input-block">
                            <input type="text" name="years" v-model="years" id="yearLimit" required lay-verify="required" placeholder="请选择年份范围" readonly
                                class="layui-input">
                        </div>
                    </div>
                </div> -->
                <div class="content-search">
                    <div>
                        统计年份：
                    </div>
                    <div>
                        <input type="text" name="years" v-model="years" id="yearLimit" required lay-verify="required" placeholder="请选择年份范围" readonly
                            class="layui-input">
                    </div>
                </div>
                <div id="supplyAndDemandCcharts" style="width: 600px;height:400px;"></div>
                <!-- <div class="main-center">
                    <div class="content-content">

                    </div>
                </div> -->
                <div class="main-right"></div>
            </div>
        </div>
    </div>
</body>
<script>

    laydate.render({
        elem: '#yearLimit', //指定元素
        type: 'year',
        range: true,
        //得到日期生成的值，如：2017-08-18
        //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
        done: function (value, date, endDate) {
            supplyAndDemand.beginYear = date.year;
            supplyAndDemand.endYear = endDate.year;
            supplyAndDemand.getSupplyAndDemand();
        }
    });

    Vue.use(VueResource);
    var supplyAndDemand = new Vue({
        el: "#supplyAndDemand",
        data: {
            beginYear: yearAfter(10),
            endYear: currentYear(),
            years: null,
        },
        methods: {
            getSupplyAndDemand: function () {
                this.years = this.beginYear + " - " + this.endYear;
                this.$http.get(getHttpServer() + "/api/web/statistical/supplyAndDemand/" + this.beginYear + "/" + this.endYear)
                    .then(function (response) {
                        var supplyAndDemand = response.data.data;
                        var supplyAndDemandChart = echarts.init(document.getElementById('supplyAndDemandCcharts'));
                        var supplyAndDemandOption = {
                            title: {
                                text: this.beginYear + "~" + this.endYear + '年供需图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['产量', '需求量']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: supplyAndDemand.years
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '产量',
                                    type: 'line',
                                    data: supplyAndDemand.produnctionCount
                                },
                                {
                                    name: '需求量',
                                    type: 'line',
                                    data: supplyAndDemand.demandCount
                                }
                            ]
                        };
                        supplyAndDemandChart.setOption(supplyAndDemandOption);
                    }).catch(function (response) {
                    });
            }
        }
    });

    supplyAndDemand.getSupplyAndDemand();
</script>

</html>